<!DOCTYPE html>
<html lang="zh-CN">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>CodeMirror 6 代码编辑器</title>
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
  <style>
    * {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
      font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    }

    body {
      background: linear-gradient(135deg, #1a2a6c, #b21f1f, #1a2a6c);
      background-size: 400% 400%;
      animation: gradientBG 15s ease infinite;
      color: #f0f0f0;
      min-height: 100vh;
      padding: 20px;
    }

    @keyframes gradientBG {
      0% {
        background-position: 0% 50%;
      }

      50% {
        background-position: 100% 50%;
      }

      100% {
        background-position: 0% 50%;
      }
    }

    .container {
      max-width: 1200px;
      margin: 0 auto;
    }

    header {
      text-align: center;
      padding: 30px 0;
      margin-bottom: 30px;
    }

    h1 {
      font-size: 2.8rem;
      margin-bottom: 10px;
      text-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
    }

    .subtitle {
      font-size: 1.2rem;
      opacity: 0.9;
      max-width: 700px;
      margin: 0 auto;
    }

    .editor-container {
      background: rgba(25, 25, 35, 0.85);
      border-radius: 12px;
      overflow: hidden;
      box-shadow: 0 15px 35px rgba(0, 0, 0, 0.5);
      margin-bottom: 30px;
      backdrop-filter: blur(10px);
      border: 1px solid rgba(255, 255, 255, 0.1);
    }

    .toolbar {
      display: flex;
      justify-content: space-between;
      background: rgba(15, 15, 25, 0.95);
      padding: 15px 20px;
      border-bottom: 1px solid rgba(255, 255, 255, 0.1);
      flex-wrap: wrap;
      gap: 15px;
    }

    .toolbar-section {
      display: flex;
      gap: 15px;
      align-items: center;
    }

    .toolbar-button {
      background: rgba(60, 90, 180, 0.7);
      color: white;
      border: none;
      padding: 10px 18px;
      border-radius: 6px;
      cursor: pointer;
      display: flex;
      align-items: center;
      gap: 8px;
      transition: all 0.3s ease;
      font-weight: 500;
    }

    .toolbar-button:hover {
      background: rgba(80, 120, 220, 0.9);
      transform: translateY(-2px);
      box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
    }

    .toolbar-button i {
      font-size: 1.1rem;
    }

    select {
      background: rgba(40, 40, 60, 0.9);
      color: white;
      border: 1px solid rgba(255, 255, 255, 0.2);
      padding: 10px 15px;
      border-radius: 6px;
      cursor: pointer;
      min-width: 150px;
    }

    .editor-wrapper {
      padding: 20px;
      height: 500px;
    }

    #editor {
      height: 100%;
      border-radius: 8px;
      overflow: hidden;
      background: rgba(10, 15, 30, 0.7);
      box-shadow: inset 0 0 20px rgba(0, 0, 0, 0.5);
    }

    .features {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
      gap: 25px;
      margin-top: 40px;
    }

    .feature-card {
      background: rgba(25, 25, 35, 0.8);
      border-radius: 10px;
      padding: 25px;
      box-shadow: 0 8px 25px rgba(0, 0, 0, 0.3);
      transition: transform 0.3s ease;
      border: 1px solid rgba(255, 255, 255, 0.1);
    }

    .feature-card:hover {
      transform: translateY(-10px);
      background: rgba(30, 30, 45, 0.9);
    }

    .feature-card h3 {
      font-size: 1.5rem;
      margin-bottom: 15px;
      color: #4a9bff;
      display: flex;
      align-items: center;
      gap: 10px;
    }

    .feature-card h3 i {
      background: rgba(74, 155, 255, 0.2);
      width: 40px;
      height: 40px;
      display: flex;
      align-items: center;
      justify-content: center;
      border-radius: 50%;
    }

    .feature-card p {
      line-height: 1.6;
      opacity: 0.9;
    }

    footer {
      text-align: center;
      margin-top: 50px;
      padding: 20px;
      font-size: 0.9rem;
      opacity: 0.8;
    }

    @media (max-width: 768px) {
      .toolbar {
        flex-direction: column;
        align-items: stretch;
      }

      .editor-wrapper {
        padding: 10px;
      }

      h1 {
        font-size: 2.2rem;
      }
    }
  </style>
</head>

<body>
  <div class="container">
    <header>
      <h1><i class="fas fa-code"></i> CodeMirror 6 编辑器</h1>
      <p class="subtitle">一个功能强大、可扩展的代码编辑器，适用于现代Web应用程序</p>
    </header>

    <div class="editor-container">
      <div class="toolbar">
        <div class="toolbar-section">
          <button class="toolbar-button"><i class="fas fa-play"></i> 运行代码</button>
          <button class="toolbar-button"><i class="fas fa-download"></i> 导出</button>
          <button class="toolbar-button"><i class="fas fa-share-alt"></i> 分享</button>
        </div>

        <div class="toolbar-section">
          <select id="theme-selector">
            <option value="default">默认主题</option>
            <option value="dark">暗黑主题</option>
            <option value="dracula">Dracula</option>
            <option value="solarized">Solarized</option>
          </select>

          <select id="language-selector">
            <option value="javascript">JavaScript</option>
            <option value="html">HTML</option>
            <option value="css">CSS</option>
            <option value="python">Python</option>
            <option value="java">Java</option>
          </select>
        </div>
      </div>

      <div class="editor-wrapper">
        <div id="editor"></div>
      </div>
    </div>

    <div class="features">
      <div class="feature-card">
        <h3><i class="fas fa-bolt"></i> 高性能</h3>
        <p>CodeMirror 6 使用现代浏览器技术构建，提供流畅的编辑体验，即使处理大型文件也能保持高性能。</p>
      </div>

      <div class="feature-card">
        <h3><i class="fas fa-puzzle-piece"></i> 模块化架构</h3>
        <p>通过模块化设计，您可以选择只加载需要的功能，保持应用轻量级并提高加载速度。</p>
      </div>

      <div class="feature-card">
        <h3><i class="fas fa-palette"></i> 主题定制</h3>
        <p>提供多种内置主题，同时支持完全自定义主题，满足不同用户的视觉需求。</p>
      </div>

      <div class="feature-card">
        <h3><i class="fas fa-language"></i> 多语言支持</h3>
        <p>支持超过100种编程语言的语法高亮，并且可以轻松扩展到其他语言。</p>
      </div>
    </div>

    <footer>
      <p>CodeMirror 6 代码编辑器示例 | 使用现代Web技术构建</p>
    </footer>
  </div>

  <!-- 加载CodeMirror资源 -->
  <script type="module">
    // 从CDN导入CodeMirror模块
    import { EditorState, EditorView, basicSetup } from 'https://cdn.jsdelivr.net/npm/codemirror@6.0.1/+esm';
    import { javascript } from 'https://cdn.jsdelivr.net/npm/@codemirror/lang-javascript@6.0.1/+esm';
    import { html } from 'https://cdn.jsdelivr.net/npm/@codemirror/lang-html@6.0.1/+esm';
    import { css } from 'https://cdn.jsdelivr.net/npm/@codemirror/lang-css@6.0.1/+esm';
    import { python } from 'https://cdn.jsdelivr.net/npm/@codemirror/lang-python@6.0.1/+esm';
    import { java } from 'https://cdn.jsdelivr.net/npm/@codemirror/lang-java@6.0.1/+esm';

    // import { EditorState, type, Extension, Compartment, StateEffect } from "./node_modules/@codemirror/state/dist/index.js";
    // import { EditorView } from "./node_modules/@codemirror/view/dist/index.js";
    // import { basicSetup } from "./node_modules/codemirror/dist/index.js";
    // import { defaultKeymap } from "./node_modules/@codemirror/commands/dist/index.js"

    import oneDark from 'https://cdn.jsdelivr.net/npm/@codemirror/theme-one-dark@6.1.2/+esm ';


    // 导入主题
    // import { oneDark } from 'https://cdn.jsdelivr.net/npm/@codemirror/theme-one-dark@6.0.1/+esm';
    import { dracula } from 'https://cdn.jsdelivr.net/npm/@codemirror/theme-dracula@6.0.1/+esm';
    import { solarizedLight } from 'https://cdn.jsdelivr.net/npm/@codemirror/theme-solarized@6.0.1/+esm';


    // 初始代码内容
    const initialCode = `// 欢迎使用CodeMirror 6
function greeting(name) {
    return \`Hello, \${name}! 这是一个CodeMirror 6的示例。\`;
}

// 调用函数
const message = greeting("开发者");

// 输出结果到控制台
console.log(message);

/*
 * CodeMirror 6 特性:
 * - 语法高亮
 * - 自动缩进
 * - 括号匹配
 * - 代码折叠
 * - 多种主题支持
 */`;



    // 创建编辑器实例
    const editor = new EditorView({
      doc: initialCode,
      extensions: [
        basicSetup,
        javascript(),
        oneDark
      ],
      parent: document.getElementById('editor')
    });

    // 主题切换功能
    document.getElementById('theme-selector').addEventListener('change', (e) => {
      const theme = e.target.value;
      let themeExtension;

      switch (theme) {
        case 'dark':
          themeExtension = oneDark;
          break;
        case 'dracula':
          themeExtension = dracula;
          break;
        case 'solarized':
          themeExtension = solarizedLight;
          break;
        default:
          themeExtension = [];
      }

      // 更新编辑器主题
      editor.dispatch({
        effects: EditorView.theme.reconfigure(themeExtension)
      });
    });

    // 语言切换功能
    document.getElementById('language-selector').addEventListener('change', (e) => {
      const lang = e.target.value;
      let langExtension;

      switch (lang) {
        case 'html':
          langExtension = html();
          break;
        case 'css':
          langExtension = css();
          break;
        case 'python':
          langExtension = python();
          break;
        case 'java':
          langExtension = java();
          break;
        default:
          langExtension = javascript();
      }

      // 更新编辑器语言
      editor.dispatch({
        effects: editor.state.update({
          effects: [EditorView.decorations.reconfigure([langExtension])]
        })
      });
    });

    // 添加运行按钮功能
    document.querySelector('.toolbar-button').addEventListener('click', () => {
      alert('代码执行功能需要后端支持。\n当前代码:\n' + editor.state.doc.toString());
    });
  </script>
</body>

</html>